{% extends "base.html" %}

{% block title %}文件上传{% endblock %}

{% block content %}
<div class="upload-box">
    <img src="{{ url_for('static', filename='logo1.png') }}" alt="网站Logo" class="logo">
    <h2>上传盘库文件</h2>

    <form id="upload-form">
        <table class="form-table">
            <tr>
                <td><label for="title">标题：</label></td>
                <td><input type="text" name="title" id="title" required></td>
            </tr>
            <tr>
                <td><label for="company">公司：</label></td>
                <td><input type="text" name="company" id="company" required></td>
            </tr>
            <tr>
                <td><label for="date">日期：</label></td>
                <td><input type="date" name="date" id="date" required></td>
            </tr>
            <tr>
                <td><label for="remarks">备注：</label></td>
                <td><textarea name="remarks" id="remarks" rows="3"></textarea></td>
            </tr>
            <tr>
                <td><label for="file">压缩文件：</label></td>
                <td><input type="file" name="file" id="file" required></td>
            </tr>
        </table>

        <div style="text-align: center;">
            <button type="submit" class="submit-btn">提交</button>
        </div>

        <div class="progress-container">
            <div class="progress-bar" id="progress-bar"></div>
        </div>
        <div id="progress-text" class="progress-text">等待上传...</div>
    </form>
</div>

<style>
    .upload-box {
        max-width: 700px;
        margin: 40px auto;
        background-color: #ffffff;
        padding: 40px 50px;
        border-radius: 12px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
    }

    .logo {
        height: 60px;
        display: block;
        margin: 0 auto 20px auto;
    }

    h2 {
        text-align: center;
        color: #007BFF;
        margin-bottom: 30px;
    }

    .form-table {
        width: 100%;
        border-collapse: collapse;
    }

    .form-table td {
        padding: 12px 10px;
        vertical-align: top;
    }

    .form-table input[type="text"],
    .form-table input[type="date"],
    .form-table input[type="file"],
    .form-table textarea {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #ccc;
        border-radius: 6px;
        font-size: 14px;
    }

    .form-table textarea {
        resize: vertical;
    }

    .submit-btn {
        background-color: #4CAF50;
        color: white;
        padding: 12px 30px;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        margin-top: 20px;
    }

    .submit-btn:hover {
        background-color: #388E3C;
    }

    .progress-container {
        width: 100%;
        height: 20px;
        background-color: #eee;
        border-radius: 10px;
        margin-top: 20px;
        overflow: hidden;
    }

    .progress-bar {
        height: 100%;
        width: 0%;
        background-color: #4CAF50;
        transition: width 0.3s;
    }

    .progress-text {
        margin-top: 10px;
        text-align: center;
        font-size: 14px;
        color: #333;
    }
</style>

<script>
    document.getElementById('upload-form').addEventListener('submit', function (e) {
        e.preventDefault(); // 防止默认提交

        const form = e.target;
        const formData = new FormData(form);
        const xhr = new XMLHttpRequest();

        xhr.open('POST', '{{ url_for("upload") }}', true);

        xhr.upload.addEventListener('progress', function (e) {
            if (e.lengthComputable) {
                const percent = Math.round((e.loaded / e.total) * 100);
                document.getElementById('progress-bar').style.width = percent + '%';
                document.getElementById('progress-text').textContent = `上传进度：${percent}%`;
            }
        });

        xhr.onload = function () {
            if (xhr.status === 200) {
                document.getElementById('progress-text').textContent = '上传成功！';
                //可选：跳转或清空表单
                window.location.href = '/success';
            } else {
                document.getElementById('progress-text').textContent = '上传失败，请重试。';
            }
        };

        xhr.send(formData);
    });
</script>
{% endblock %}